<template>
	<view class="myBox">
		<view class="avatarBox">
			<viwe class="head"><image :src="userInfo.avatar"></image></viwe>
			<view class="Umessage">
				<view class="Uname">{{userInfo.nickName}}</view>
				<view class="Uphone">{{userInfo.mobile}}</view>
			</view>
		</view>
		<view class="auctionBox">
			<!-- 拍卖 -->
			<view class="auctionTitle">我的拍卖</view>
			<view class="auctionContent">
				<view class="au-item" v-for='cu in cuIconList' :key="cu.status" @click="tabChange">
					<view style="position: relative;">
						<image :src="cu.cuIcon" mode="aspectFit" class="bidIcon"></image>
						<view class="au-bage" v-if="cu.badge != 0">
							<block>{{cu.badge > 99 ? "99+" : cu.badge}}</block>
						</view>
					</view>
					<text>{{cu.name}}</text>
				</view>
			</view>
		</view>
		<view class="securityBoxs">
			<view class="securityTitle">
				<text>我的保证金</text>
				<navigator url="#">查看</navigator>
			</view>
			<view class="securityContent">
				<view><Security></Security></view>
				<view><Security></Security></view>
				<view><Security></Security></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {checkLogin} from '@/utils/unils.js';
	import {fetchUserInfo,fetchNumber,getWaitStartList} from '@/api/my/my.js';
	
	import status_active_1 from 'static/tabs/status_active_1.png';
	import status_active_2 from 'static/tabs/status_active_2.png';
	import status_active_3 from 'static/tabs/status_active_3.png';
	import status_active_4 from 'static/tabs/status_active_4.png';
	import status_active_5 from 'static/tabs/status_active_5.png';
export default {
	data() {
		return {
			userInfo:null,
			cuIconList: [
				{
					cuIcon: status_active_1,
					badge: 0,
					name:'待开拍',
					status:1
				},{
					cuIcon: status_active_2,
					badge: 0,
					name:'竞价中',
					status:2
				},{
					cuIcon: status_active_3,
					badge: 0,
					name:'已结束',
					status:3
				},{
					cuIcon: status_active_4,
					badge: 0,
					name:'已拍下',
					status:4
				},{
					cuIcon: status_active_5,
					badge: 0,
					name:'提货订单',
					status:5
				}
			],
			list:{}
		};
	},
	onLoad() {
		// if(!checkLogin()) return;
	},
	onShow() {
		this.fetchInit()
	},
	methods: {
		fetchInit() {
			this.getUserInfo()
			this.getTabNumber()
			this.fetchWaitStartList()
		},
		async getUserInfo() {
			const res = await fetchUserInfo();
			this.userInfo = res.data;
			uni.setStorageSync('userInfo',this.userInfo)

		},
		async getTabNumber() {
			let {data} =  await fetchNumber()
			this.cuIconList = [
				{
					cuIcon: status_active_1,
					badge: data.waitStartNum,
					name:'待开拍',
					status:1
				},{
					cuIcon: status_active_2,
					badge: data.startingNum,
					name:'竞价中',
					status:2
				},{
					cuIcon: status_active_3,
					badge: data.finishNum,
					name:'已结束',
					status:3
				},{
					cuIcon: status_active_4,
					badge: data.hasTakeNum,
					name:'已拍下',
					status:4
				},{
					cuIcon: status_active_5,
					badge: data.takeGoodsNum,
					name:'提货订单',
					status:5
				}
			]
		},
		// 获取保证金信息
		async fetchWaitStartList() {
		 	let data = await getWaitStartList()
			console.log(data);
		},
		tabChange() {
			uni.navigateTo({
				url:'/pages/my/action'
			})
		},
		goLogin() {
			uni.navigateTo({
				url:'/subPages/login/login'
			})
		}
	}
};
</script>

<style lang="scss">
.myBox {
	min-height: 100vh;
	background-color: #212121;
}
.avatarBox {
	display: flex;
	width: 340px;
	margin: 0 auto;
	color: #fff;
	font-size: 16px;
}
.head {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	text-align: center;
	font-size: 10px;
	color: #3d3d3d;
	background-color: #d8d8d8;
}
.head > image {
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
}
.Umessage {
	display: flex;
	height: 50px;
	flex-direction: column;
	justify-content: center;
	margin-left: 10px;
}
.Umessage > view:first-child {
	padding-bottom: 5px;
}
.auctionBox {
	width: 360px;
	min-height: 100px;
	background-color: #323232;
	margin: 24px auto 10px;
}
.auctionTitle {
	width: 95%;
	height: 40px;
	line-height: 40px;
	margin: 0 auto;
	border-bottom: 1px solid #555555;
	color: #fff;
	font-size: 14px;
}
.auctionContent {
	display: flex;
	justify-content: space-around;
	font-size: 12px;
	margin-top: 8px;
	color: #c4c4c4;
	.au-item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.au-bage {
			position: absolute;
			top: -8px;
			right:-12px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			text-align: center;
			background-color: red;
			color: #fff;
		}
	}
}
.securityBoxs {
	width: 360px;
	height: 250px;
	background-color: #323232;
	margin: 0 auto;
}
.securityTitle {
	display: flex;
	justify-content: space-between;
	width: 95%;
	height: 40px;
	line-height: 40px;
	color: #fff;
	border-bottom: 1px solid #555555;
	font-size: 14px;
	margin: 0 auto;
}
.securityContent {
	min-height: 200px;
}
.securityContent > view {
	margin: 10px auto;
}
</style>
